import React, { Component } from 'react'
import { Alert, Row, Col, Form, InputNumber, Button, Select, Icon } from 'antd';
import { BasicLayoutSearch, BasicLayout } from '../../../components/BasicLayout';
import { TableCustomize } from '../../../components/TableCustomize';
const FormItem = Form.Item;
const { Option } = Select
const date = new Date();
const nowDate = date.toLocaleString();
export default class SubmitOwe extends Component {
    state = {
        tableData: [],
        submit: [],
        storeName1: []
    }
    componentDidMount() {
        const { submit, submits, takeNumber1 } = this.props
        const storeName = []
        const takeNum1 = []
        const tableData = []
        console.log(submit);
        submit.forEach((value, index) => {
            console.log('外层', value);
            value.bodyVOList.forEach((value_1, index_1) => {
                console.log('数据', value_1);
                storeName.push(value_1.storeName)
                takeNum1.push(value_1.takeNumber === null ? 0 : value_1.takeNumber)
                tableData.push(value_1)
            })
        })
        const storeName1 = Array.from(new Set(storeName)).join(',')
        this.setState({
            submit: submit,
            tableData: tableData,
            storeName1
        }, () => { submits(submit) })
        takeNumber1(takeNum1)
    }
    // 取消
    cancel = (a, i) => {
        const takeNum1 = []
        const { submit, submits, takeNumber1 } = this.props
        submit.forEach((value, index) => {
            value.bodyVOList.forEach((value_1, index_1) => {
                takeNum1.push(value_1.takeNumber === null ? 0 : value_1.takeNumber)
                if (a.id === value_1.id) {
                    value.bodyVOList.splice(i, 1)
                }
                if (value.bodyVOList.length === 0) {
                    submit.splice(index, 1)
                }
            })
        })
        this.setState({
            submit
        })
        submits(submit)
        console.log(takeNum1);
        takeNumber1(takeNum1)
    }
    // 删除table
    closeBatchList = (i, item) => {
        console.log(item);
        const takeNum1 = []
        const { submit, submits, takeNumber1 } = this.props
        submit.forEach((value, index) => {
            if (item.id === value.id) {
                submit.splice(i, 1)
            }
            value.bodyVOList.forEach((value_1, index_1) => {
                takeNum1.push(value_1.takeNumber === null ? 0 : value_1.takeNumber)
            })
        })
        this.setState({
            submit
        })
        submits(submit)
        console.log(takeNum1);
        takeNumber1(takeNum1)
    }
    onChange = (e, record) => {
        const { submits, submit, takeNumber1 } = this.props
        record.takeNumber = e;
        // console.log(this.state.submit);
        submits(this.state.submit)
        takeNumber1([e])
    }
    onChange1 = (e) => {
        console.log(e);
        const { submits, submit } = this.props
        this.state.submit.shortType = e
        this.setState({
            submit
        }, () => { submits(this.state.submit) })

    }
    render() {
        const { submit, storeName1 } = this.state
        const columns = [
            {
                title: '序号',
                dataIndex: 'serialNumber',
                width: 50,
                align: 'center',
                render: (text, record, index) => `${index + 1}`,
            },
            {
                title: '物料编码',
                dataIndex: 'partCode',
                width: 100,
            },
            {
                title: '图号',
                dataIndex: 'paperCode',
                width: 180,
            },
            {
                title: '装配组别',
                dataIndex: 'category',
                width: 100,
            },
            {
                title: '物料名称',
                dataIndex: 'partName',
                width: 80,
            },
            {
                title: '物料规格',
                dataIndex: 'partSpec',
                width: 100,
            },
            {
                title: '仓库名称',
                dataIndex: 'storeName',
                width: 100,
            },
            {
                title: '欠料数量',
                dataIndex: 'takeNumber',
                width: 100,
                render: (text, record, index) =>
                    <div>
                        <InputNumber min={0} onChange={(e) => this.onChange(e, record)} defaultValue={text === null ? 0 : text}></InputNumber>
                    </div>,
            },
            {
                title: '需求数量',
                dataIndex: 'requestNumber',
                width: 80,
            },
            {
                title: '操作',
                dataIndex: 'opes',
                width: 100,
                render: (text, record, index) =>
                    <div>
                        <a onClick={this.cancel.bind(this, record, index)}>{'取消选择'}</a>
                    </div>

            },
            { dataIndex: '' }
        ]
        return (
            <div>
                <Row gutter={24}>
                    <Col span={8}>
                        <div>创建者:{localStorage.getItem('userName')}</div>
                    </Col>
                    <Col span={8}>
                        欠料仓库: {storeName1 ? storeName1 : null}
                    </Col>
                    <Col span={8} style={{ display: 'flex', alignItems: 'center' }}>
                        {/* 类别: <Select style={{ width: '100px', zIndex: '1000' }} onChange={this.onChange1} defaultValue={submit.shortType} showSearch placeholder={'请选择类别'}>
                            <Option value={'备料'}>备料</Option>
                            <Option value={'投料'}>投料</Option>
                            <Option value={'其他类型1'}>其他类型1</Option>
                            <Option value={'其他类型2'}>其他类型2</Option>
                        </Select> */}
                        <span style={{ wordBreak: 'keep-all' }}>类别：</span>
                        <Select style={{ width: '100px' }} onChange={this.onChange1} defaultValue={submit.shortType} showSearch>
                            <Option value={'备料'}>备料</Option>
                            <Option value={'投料'}>投料</Option>
                            <Option value={'其他类型1'}>其他类型1</Option>
                            <Option value={'其他类型2'}>其他类型2</Option>
                        </Select>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={8}>
                        <div>创建时间:{nowDate}</div>
                    </Col>
                    <Col span={16}>
                    </Col>
                </Row>
                {
                    submit ? submit.map((value, index) => {
                        return <BasicLayoutSearch key={index}>
                            <Form className="search-form" style={{ marginBottom: 10, position: 'relative' }}>
                                <Row gutter={24}>
                                    <Col span={4}>
                                        <FormItem label='批号:'>
                                            <span style={{ fontWeight: 'bold' }}>{value.batchNo}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={4}>
                                        <FormItem label='机型:'>
                                            <span style={{ fontWeight: 'bold' }}>{value.model}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={14}>
                                        <Alert message={<div>本领料单、本仓库全部未发放的物料，均体现在当前欠料单中!</div>} type="info" showIcon />
                                    </Col>
                                </Row>
                                <Row gutter={24}>
                                    <Col span={4}>
                                        <FormItem label='部门:'>
                                            <span style={{ fontWeight: 'bold' }}>{value.departName}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={4}>
                                        <FormItem label='班组'>
                                            <span style={{ fontWeight: 'bold' }}>{value.groupName}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={8}>
                                        <FormItem label='领料单:'>
                                            <span style={{ fontWeight: 'bold' }}>{value.acceptCode}</span>
                                        </FormItem>
                                    </Col>
                                    <Col span={8}>
                                        <FormItem label='欠料单:'>
                                            <span style={{ fontWeight: 'bold' }}>{value.materialShortageCode}</span>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <div className='closeIcon'><Icon type="close-circle" onClick={() => this.closeBatchList(index, value)} /></div>
                            </Form>
                            <TableCustomize
                                rowClassName={(record, index) => {
                                    return (['editable-row', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
                                }}
                                columns={columns}
                                rowKey={record => record.id}
                                dataSource={value.bodyVOList}
                                pagination={false}
                                scroll={{ y: 300 }} />
                        </BasicLayoutSearch>
                    }) : null
                }
            </div>
        )
    }
}